<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="hand-left">
          <img src="https://s.weituibao.com/1582958061265/mlogo.png" alt="" />
          <h1>vue3 admin</h1>
        </div>
        <div></div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-col :span="12">
            <el-menu
              active-text-color="#ffd04b"
              background-color="#222832"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-sub-menu index="1-4">
                <template #title>Dashboard</template>
                <el-menu-item index="1-4-1">
                  <el-icon><DataAnalysis /></el-icon>
                  系统介绍</el-menu-item
                >
                <el-menu-item index="1-4-2"
                  ><el-icon><Odometer /></el-icon>Dashboard</el-menu-item
                >
                <el-menu-item index="1-4-3"
                  ><el-icon><Plus /></el-icon>添加商品</el-menu-item
                >
              </el-sub-menu>
              <el-sub-menu index="1-5">
                <template #title>首页配置</template>
                <el-menu-item index="1-5-1"
                  ><el-icon><Picture /></el-icon>轮播图配置</el-menu-item
                >
                <el-menu-item index="1-5-2"
                  ><el-icon><StarFilled /></el-icon>热销商品配置</el-menu-item
                >
                <el-menu-item index="1-5-3"
                  ><el-icon><Sell /></el-icon>新品上线配置</el-menu-item
                >
                <el-menu-item index="1-5-4">
                  <el-icon><Pointer /></el-icon>
                  为你推荐配置</el-menu-item
                >
              </el-sub-menu>
              <el-sub-menu index="1-6">
                <template #title>模块管理</template>
                <el-menu-item index="1-6-1"
                  ><el-icon><Menu /></el-icon>分类管理</el-menu-item
                >
                <el-menu-item index="1-6-2"
                  ><el-icon><GoodsFilled /></el-icon>商品管理</el-menu-item
                >
                <el-menu-item index="1-6-3"
                  ><el-icon><Avatar /></el-icon>会员管理</el-menu-item
                >
                <el-menu-item index="1-6-4"
                  ><el-icon><List /></el-icon>订单管理</el-menu-item
                >
              </el-sub-menu>
              <el-sub-menu index="1-7">
                <template #title>系统管理</template>
                <el-menu-item index="1-7-1"
                  ><el-icon><Lock /></el-icon>修改密码</el-menu-item
                >
              </el-sub-menu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";

const item = {
  date: "2016-05-02",
  name: "Tom",
  address: "No. 189, Grove St, Los Angeles",
};
const tableData = ref(Array.from({ length: 20 }).fill(item));
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.hand-left {
  width: 200px;
  height: 100%;
  background: #222832;
  display: flex;
  justify-content: space-around;
  img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  h1 {
    color: white;
    margin: auto;
  }
}
.common-layout {
  height: 100%;
}
.el-container {
  height: 100%;
}
.el-aside {
  height: 100%;
  background-color: #222832;
}
.el-menu {
  width: 200px;
  background: #222832;
}
</style>